<template>
  <div class="xtx-city" ref="target">
    <div class="select">
      <span class="placeholder" @click="toggle">{{
        modelValue.fullStr || '请选择城市'
      }}</span>
      <span class="value"></span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <div class="option" v-if="isShow">
      <!-- loading -->
      <div v-if="!cityArr.length" class="loading"></div>
      <template v-else>
        <span
          @click="cityClick(i)"
          class="ellipsis"
          v-for="i in cityArr"
          :key="i"
          >{{ i.name }}</span
        >
      </template>
    </div>
  </div>
</template>
<script>
import { useStore } from 'vuex'
import { ref, watch } from 'vue'
import { onClickOutside } from '@vueuse/core'
// onClickOutside(target(dom),()=>{方法回调})  当点击dom区域外就会执行回调方法

/*
城市选择组件：
1：选择完的数据要记录
   省（name,code），市(name,code)，区(name,code)
2：选择完成，请选择配送地址值需要更改
3: 父组件需要实时知道你的选择
*/
export default {
  name: 'XtxCity',
  props: {
    modelValue: {
      type: Object,
      default: () => ({})
    }
  },
  setup (props, { emit }) {
    const store = useStore()
    const isShow = ref(false)
    // 点击切换城市显示
    const cityArr = ref([])
    function toggle () {
      isShow.value = !isShow.value
      // 打开弹框（isShow=true） 同时没有数据才调用
      if (isShow.value && cityArr.value.length === 0) {
        store.dispatch('product/getCityList').then(res => {
          cityArr.value = res
        })
      }
    }
    // 全局点击事件
    // onMounted(() => {
    //   document.addEventListener('click', documentClick)
    // })
    // // 移除监听点击事件
    // onBeforeUnmount(() => {
    //   document.removeEventListener('click', documentClick)
    // })
    // const target = ref(null)
    // function documentClick (e) {
    //   // 当前点击的dom如果在城市组件dom内说明不应该关闭弹框
    //   if (!target.value.contains(e.target)) {
    //     isShow.value = false
    //   }
    // }
    const target = ref(null)
    onClickOutside(target, () => {
      isShow.value = false
    })
    /*
    省市区的选择：省:level==0  市：level===1  区 level==2
    关闭弹框时，要还原数据
    */
    const selectInfo = {
      proviceName: '',
      proviceCode: '',
      cityName: '',
      cityCode: '',
      areaName: '',
      areaCode: '',
      fullStr: ''
    }
    function cityClick (item) {
      const _arr = ['provice', 'city', 'area']
      // selectInfo.proviceName = item.name
      selectInfo[_arr[item.level] + 'Name'] = item.name
      selectInfo[_arr[item.level] + 'Code'] = item.code
      if (item.level < 2) {
        cityArr.value = item.areaList
      } else {
        isShow.value = false
        // cityArr.value = store.state.product.cityList
        // 更改记录的地址
        selectInfo.fullStr =
          selectInfo.proviceName +
          ' ' +
          selectInfo.cityName +
          ' ' +
          selectInfo.areaName
        emit('update:modelValue', selectInfo)
        console.log('记录的数据', selectInfo)
      }

      // // 数据记录
      // if (item.level === 0) {
      //   selectInfo.proviceName = item.name
      //   selectInfo.proviceCode = item.code
      // } else if (item.level === 1) {
      //   selectInfo.cityName = item.name
      //   selectInfo.cityCode = item.code
      // } else {
      //   selectInfo.areaName = item.name
      //   selectInfo.areaCode = item.code
      //   console.log('记录的数据', selectInfo)
      // }
    }
    // 监听关闭:还原城市数据
    watch(
      () => isShow.value,
      newVal => {
        if (!newVal) {
          cityArr.value = store.state.product.cityList
        }
      }
    )

    // store.dispatch('product/getCityList')
    return { isShow, toggle, cityArr, target, cityClick }
  }
}
</script>
<style scoped lang="less">
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
  .select {
    border: 1px solid #e4e4e4;
    height: 30px;
    padding: 0 5px;
    line-height: 28px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
    // loading
    .loading {
      height: 290px;
      width: 100%;
      background: url(~@/assets/images/loading.gif) no-repeat center;
    }
  }
}
</style>
